<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>div-上下左右移动</title>
</head>
<style>
    body {
        width: 100vw;
        height: 100vh;
        background-color: wheat;
        font-size: 30px;
        font-family: "华文楷体";
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    img {
        width: 300px;
        height: 200px;
    }

    button {
        margin-top: 20px;
        font-size: 25px;
        width: 110px;
        height: 40px;
        background-color: #b3b1af;
        border: none;
        border-radius: 10%;
        box-shadow: black 0 0 5px;
        transition: linear 0.2s;
        z-index: 1;
    }

    button:hover {
        background-color: pink;
        transform: scale(1.1);
        color: deeppink;
    }
</style>
<body>
<div id="box1">
    <img id="img" src="../../Dom/image/mz1.png" alt="">
</div>
<div>
    <button id="btn1">Stop</button>
    <button id="btn2">Continue</button>
</div>

</body>
<script>
        let btn1 = document.getElementById("btn1")
        let btn2 = document.getElementById("btn2")
        let image = ["mz1", "mz2", "mz3", "mz4", "mz5", "mz6", "mz7", "mz8", "mz9"]
        let count = 0
        let Img = document.getElementById("img")
        function start() {
            clearInterval(Img.time)
            Img.time = setInterval(function () {
                Img.src = "../../Dom/image/" + image[count] + ".png"
                count++
                if (count === 8) {
                    count = 0
                }
            }, 500);
        }

        btn2.addEventListener("click", function () {
            start()
        });

        btn1.addEventListener("click", function () {
            clearInterval(Img.time);
        });

    start();
</script>
</html>
